<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>主界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
    html,body{
        font-family: "楷体";
        background-color: #80a8e1;
        margin: 0px;
        padding:0px;
    }
    .block1,.block2,.block3,.block4 {
        position: absolute;
        box-shadow: 5px 5px 5px #888888;
        letter-spacing: 0.08em;
        color: #000000;
        text-align: center;
        padding-top: 2%;
        overflow:hidden;
        border-radius: 4px;
    }

    .scrollbar {
        width : 30px;
        height: 300px;
        margin: 0 auto;
    }
    .block2::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
    }
    .block2::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #535353;
    }
    .block2::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #80a8e1;
    }
    .block3::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
    }
    .block3::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #535353;
    }
    .block3::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #80a8e1;
    }
    .block1 {
        top:7%;
        left:33%;
        right: 43%;
        bottom:83%;
        background-color: #80a8e1;
    }
    .block4 {
        top:7%;
        left:22%;
        right: 68%;
        bottom:82.5%;
        background-color: #80a8e1;
    }
    .block2 {
        top: 18%;
        left:22%;
        right: 43%;
        bottom:6%;
        background-color: #80a8e1;
        overflow-y:auto;
        overflow-x:auto;
    }
    .block3 {
        font-family: "行楷""楷体";
        font-size: 110%;
        padding-top: 0%;
        top: 7%;
        left:58%;
        right: 5%;
        bottom:6%;
        background-color: #80a8e1;
        overflow-x: auto;
        overflow-y: auto;
    }
    .input1 {
        outline:none;
        border-radius: 10px;
        border-color: antiquewhite;
        width: 60%;
    }
    .input1:hover,.input1:focus {
        border-color: #9be0ff;
    }
    #footer {
        height: 4%;
        position: fixed;
        bottom: 0%;
        width: 100%;
        text-align: center;
        background: transparent;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .headline{
        position: absolute;
        left:2%;
        top:5%;
        color: #43a4f3;
        font-family: "楷体";
        letter-spacing: 0;
        text-shadow: 0px 1px 0px #999, 1px 2px 10px #888,
        0px 1px 0px #777, 0px 1px 10px #666,
        10px 1px 10px #555, 0px 1px 10px #444,
        0px 2px 0px #333, 0px 1px 1px #001135;
    }
</style>
<body>
<div class="headline">
    <span style="font-size: 250%;">调度模拟器</span>
</div>
<img  src="./alterman.jpg" style="position: fixed;left: 0;bottom: 0;"/>


<div class="block4">
    <form style="margin: 0px;top: 0px;padding-top: 0px;font-size: 95%;height: 15px;" action="/choice" method="post">
        <select name="choice" style="border-radius: 3px;background-color: #80a8e1;border-color: #000000;">
			<span th:if="${choice} == 1">
				<option value="1" selected>轮转调度</option>
				<option value="2">优先数调度</option>
				<option value="3">最短进程优先</option>
				<option value="4">最短剩余时间</option>
			</span>
            <span th:if="${choice} == 2">
				<option value="1">轮转调度</option>
				<option value="2" selected>优先数调度</option>
				<option value="3">最短进程优先</option>
				<option value="4">最短剩余时间</option>
			</span>
            <span th:if="${choice} == 3">
				<option value="1">轮转调度</option>
				<option value="2">优先数调度</option>
				<option value="3" selected>最短进程优先</option>
				<option value="4">最短剩余时间</option>
			</span>
            <span th:if="${choice} == 4">
				<option value="1">轮转调度</option>
				<option value="2">优先数调度</option>
				<option value="3">最短进程优先</option>
				<option value="4" selected>最短剩余时间</option>
			</span>

        </select>
        <button type="submit" style="font-size: 5%;
									background-color: transparent;
									border-color: #000000;
									border-width: 1px;
									border-radius: 2px;
									color: #000000;
									height: 16px;">
            选择</button>
    </form>
</div>

<div class="block1">
    <a th:href="@{/createProcess}">
        <button type="submit" style="font-size: 100%;
									background-color: transparent;
									border-color: #000000;
									border-width: 1px;
									border-radius: 2px;
									color: #000000;
									height: 50px%;">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            创建进程
        </button>
    </a>

    <a th:href="@{/execute}">
        <button type="submit" style="font-size: 100%;
									background-color: transparent;
									border-color: #000000;
									border-width: 1px;
									border-radius: 2px;
									color: #000000;
									height: 50px%;">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
            执行时间片
        </button>
    </a>
</div>



<div class="block2">
    进程队列：<br />
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <table class="table table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>标识符</th>
                        <th>状态</th>
                        <th>优先数</th>
                        <th>剩余时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:if="${latestRunningPCBProcess} != null">
                        <td th:text="${latestRunningPCBProcess.name}"></td>
                        <td style="color: red;">运行</td>
                        <td th:text="${latestRunningPCBProcess.pri}"></td>
                        <td th:text="${latestRunningPCBProcess.time}"></td>
                    </tr>
                    <tr th:each="pcbProcess : ${readyQueue}">
                        <td th:text="${pcbProcess.name}"></td>
                        <td >就绪</td>
                        <td th:text="${pcbProcess.pri}"></td>
                        <td th:text="${pcbProcess.time}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <br />到底了，没进程了！😱
</div>



<div class="block3">
    时间片：<span th:text="${systemTime}"></span><br />
    控制台提示区<br />
    ----------------<br />
    <span th:text="${tips}"></span>

</div>
<div id="footer">©2021 Dispatcher Simulator made by Wenhao at 2021 粤ICP备2026128号-2</div>

</body>
</html>